<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css" media="screen">
		*{margin:0;padding:0;list-style:none;}
		.box{
			position:absolute;
			left:0;
			top: 0;
			width: 100px;
			height: 100px;
			background-color: #000;
		}
	</style>
</head>
<body>
	<div id="box" class="box"></div>
	<script type="text/javascript" src="../css.js"></script>
	<script type="text/javascript" src="requestAnimation.js"></script>
	<script type="text/javascript">
		
		var box = document.getElementById('box');

		var fpsIndex = null;

		css(box,'translateX',0);

		
		fpsIndex = requestAnimationFrame(move);



		function move(){
			var x = css(box,'translateX');
			if(x >=600){
				cancelAnimationFrame(fpsIndex);
			}else{
				x+=10;
				css(box,'translateX',x);
				fpsIndex = requestAnimationFrame(move);
			}

		}
	</script>
</body>
</html>
